<!--
    知识点学习
    1：父组件传给子组件问题；
    答：父组件引用子组件的时候，使用import引入，引入之后，绑定事件。
    2：子组件写上props:['dialog'], 方法使用dialog 的变量。
    3：这个时候会遇到一个坑，例如单击弹窗的右上的一个叉，这个时候，就会变成单向绑定。会报错 prop 。。。一个错误。
       因为你没有给事件监听，vue会给一个默认事件，会回传给父组件，这个时候变成单向绑定，发现回传不过去。所以会报错。
    4：el-dialog 标签上加上 :before-close="dialogFormVisible" 方法。dialogFormVisible 对应按钮的 @click="dialogFormVisible" 事件
-->
<template>
    <div>
        <el-dialog title="编辑用户" :visible.sync="editdialog" :before-close="editDialogFormVisible" @open="openDialog">
            <el-form :model="userInfo"  ref="userInfoForm" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名">
                            <el-input v-model="userInfo.userName" class="inser-input requestUsername"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄">
                            <el-input v-model="userInfo.age" class="inser-input requestAge"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账号">
                            <el-input v-model="userInfo.account" class="inser-input requestAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户头像">
                            <el-upload class="avatar-uploader" ref="upload" action="#" :on-change="fileUpload" :show-file-list="false"
                                :auto-upload="false">
                                <img v-if="userInfo.imageUrl" :src="file" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号">
                            <el-input v-model="userInfo.phone" class="inser-input requestPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="qq">
                            <el-input v-model="userInfo.qq" class="inser-input requestQQ"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="userInfo.email" class="inser-input requestEmail"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="座机">
                            <el-input v-model="userInfo.mobile" class="inser-input requestMobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible">取 消</el-button>
                <el-button type="primary" @click="editUser()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
export default {
    props: ['editdialog', 'userInfo'],
    data() {
        return {
            imageId: '',
            relativUrl: 'http://127.0.0.1/images/',
            userId: '',
            file:''

        }
    },
    methods: {
        //打开弹窗时，赋值图片路径进行回显
        openDialog(){
            this.file = this.relativUrl + this.userInfo.imageUrl;
        },
        //图片上传
        fileUpload(files, fileList) {
            let newFileForm = new FormData();
            newFileForm.append("file", files.raw)
            this.$http({
                method: 'post',
                url: '/admin/upsFile/upload',
                Headers: {
                    "Content-Type": "multipart/form-data"
                },
                data: newFileForm
            }).then(res => {
                let starTime = new Date().getTime();
               
                console.log("upload:" + res.data.code);
                let result = res.data;
                if (result.code === 200) {
                    this.file = this.relativUrl + result.data.sourceUrl;
                    this.imageId = result.data.id;
                }
            })
        },
        //关闭弹窗方法
        editDialogFormVisible() {
            this.$emit("editDialogFormVisible", false);
        },
        //编辑用户提交按钮
        editUser() {

            let addUser = this.userInfo;
            console.log(addUser)
            let data = {
                "userId": addUser.id,
                "userName": addUser.userName,
                "age": addUser.age,
                "account": addUser.account,
                "imageId": addUser.imageId,
                "phone": addUser.phone,
                "mobile": addUser.mobile,
                "qq": addUser.qq,
                "email": addUser.email,
                "imageId":this.imageId
            }
            this.$http({
                method: 'post',
                Headers: {
                    "Content-Type": "application/json"
                },
                url: '/admin/userInfo/update',
                data: data
            }).then(res => {
                let result = res.data;
                if (result.code == 200) {
                    this.$message({
                        showClose: true,
                        message: '编辑成功成功',
                        type: 'success'
                    })
                    //调用关闭弹窗方法，里面同时含有刷新列表
                    this.editDialogFormVisible();
                }
            })
        }
    }
}

</script>

<style></style>